<template>
    <div>
        <div>
            <span style="font-size: 12px">时间范围</span>
            <el-radio-group v-model="timeRange">
                <el-radio-button v-for="range in timeRangeList" :key="range.value" :label="range.value">
                    {{range.label}}
                </el-radio-button>
            </el-radio-group>
            <el-button 
                icon="el-icon-date" 
                style="min-width: 30px"
                v-show="!isDatePicker"
                @click="showDatePicker">
            </el-button>
            <el-date-picker
                v-show="isDatePicker"
                @blur="datePickChange"
                v-model="dateTime"
                type="datetimerange"
                align="right"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
        </div>
        <div class="container">
            <el-row v-for="row in rowList" :key="row">
                <el-col 
                    v-for="(col) in row"
                    :key="col.key"
                    :span="24 / colNum"
                    style="height: 400px"
                >
                    <monitorChart :id="col.key" :monitorData="monitorData[col.key]" 
                        :monitorTimeType="monitorTimeType"
                        :title="col.label">
                    </monitorChart>
                </el-col>
            </el-row>    
        </div>
    </div>
</template>

<script>
import monitorEchart from './monitorEchart.vue'
import { loginMonitor, electionMonitor } from 'common/src/api/monitor'
import moment from 'moment'
export default {
    name: 'monitor',
    components: {
        monitorChart: monitorEchart
    },
    data() {
        var endTime = new Date()
        var startTime = endTime.getTime() - 3600 * 1000 * 24 * 7
        return {
            dateTime: [startTime, endTime],
            isDatePicker: false,
            colNum: 2,
            monitorList: [
                {
                    label: '在线人数',
                    key: 'login'
                },
                {
                    label: '选课数',
                    key: 'election'
                }
            ],
            rowList: [],
            timeRange: '1',
            timeRangeList: [
                {
                    label: '近1小时',
                    value: '1'
                },
                {
                    label: '近3小时',
                    value: '3'
                },
                {
                    label: '近12小时',
                    value: '12'
                },
                {
                    label: '24小时',
                    value: '24'
                }
            ],
            monitorQuery: {
                lastHours: '',
                startTime: '',
                endTime: ''
            },
            monitorData: {
                login: [],
                election: []
            },
            monitor: {
                title: '',
                type: 1
            },
            monitorTimeType: 1
        }
    },
    created() {
        this.rowList = this.dynamicRows(this.monitorList, this.colNum)
    },
    watch: {
        timeRange: {
            immediate: true,
            handler: function (val) {
                if (val) {
                    this.monitorQuery = {
                        lastHours: +val,
                        startTime: '',
                        endTime: ''
                    }
                    this.monitorTimeType = +val < 24 ? 1 : 2
                    this.isDatePicker = false
                    this.getMonitorData()
                }
            }
        } 
    },
    methods: {
        dynamicRows(array, col = 4) {
            return _.chunk(array, col);
        },
        getMonitorData() {
            let queryParams = this.monitorQuery
            this.loginMonitor(queryParams)
            this.electionMonitor(queryParams)
        },
        async loginMonitor(queryParams) {
            try {
                let resp = await loginMonitor(queryParams)
                if (resp && resp.data && resp.code === 200) {
                    this.monitorData.login = resp.data
                }
            } catch (error) {
                console.log(error)
            }
        },
        async electionMonitor(queryParams) {
            try {
                let resp = await electionMonitor(queryParams)
                if (resp && resp.data && resp.code === 200) {
                    this.monitorData.election = resp.data
                }
            } catch (error) {
                console.log(error)
            }
        },
        datePickChange(val) {
            let data = val.value || []
            if (data.length) {
                this.monitorQuery = {
                    lastHours: '',
                    startTime: moment(data[0]).format('YYYY-MM-DD HH:mm:ss'),
                    endTime: moment(data[1]).format('YYYY-MM-DD HH:mm:ss')
                }
                this.getMonitorData()
            }
        },
        showDatePicker() {
            this.isDatePicker = true
            this.timeRange = ''
        }
    }
}
</script>

<style lang="scss" scoped>
.monitorSty {
    border: 1px solid #adb0b8;
    padding: 10px;
}
</style>